<template>
     <!-- 折线图 -->
     <div class="componentbox">
        <div class="bottom-left-title">
            <span>浙江省火化人数统计</span>
        </div>
        <div class="category" ref="category"></div>
     </div>
          
</template>

<style  rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.componentbox{
    height: 100%;
}
.bottom-left-title{
  position: absolute;
  top: 1vh;
  left: 25px;
  font-size: 24px;
  color: #ffffff
}
.category{
  width: 95%;
  height: 100%;
}
</style>

<script>
import echarts from "echarts";
import axios from 'axios'
export default {
    data() {
        return{
            myChartCategory: null,
            // 折线图
            optioncategory: {
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#7fcceb'
                        }
                    }
                },
                color: ['#905365'],
                // legend: {
                //     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                // },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日','周日','周日','周日','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'搜索引擎',
                        type:'line',
                        smooth: true,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        areaStyle: {normal:{
                        color: '#7fcceb'
                        }},
                        data:[0, 932, 901, 934, 1290, 1330,880,770,660,550, 0]
                    }
                ]
            }
        }
    },
    mounted(){
        this.myChartCategory = echarts.init(this.$refs.category); 
        this.myChartCategory.setOption(this.optioncategory);
    }
}
</script>
